<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="n1" />

      <select v-model="opt">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
      </select>

      <input type="text" v-model="n2" />

      <input type="button" value="=" v-on:click="calc" />

      <input type="text" v-model="result" />
    </div>

    <script>
      // 创建 Vue 实例，得到 ViewModel
      var vm = new Vue({
        el: "#app",
        data: {
          n1: 0,
          n2: 0,
          result: 0,
          opt: "+"
        },
        methods: {
          // Model(data) 中数据被修改了  vm 会自动把更新的数据同步到页面上
          calc() {
            // 计算器算数的方法
            // 逻辑
            /* switch (this.opt) {
                        case '+':
                            this.result = parseInt(this.n1) + parseInt(this.n2);
                            break;
                        case '-':
                            this.result = parseInt(this.n1) - parseInt(this.n2);
                            break;
                        case '*':
                            this.result = parseInt(this.n1) * parseInt(this.n2);
                            break;
                        case '/':
                            this.result = parseInt(this.n1) / parseInt(this.n2);
                            break;
                    } */
            // 注意：这是投机取巧的方式，正式开发中，尽量少用
            var codeStr =
              "parseInt(this.n1) " + this.opt + " parseInt(this.n2)";
            this.result = eval(codeStr); //eval方法 把字符串解析执行 并拿到执行结果
          }
        }
      });
    </script>
  </body>
</html>
